﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UpdateApp.Default" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <%--移动端优先--%>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <title>文件上传</title>
    <link href="JavaScript/webuploader/webuploader.css" rel="stylesheet" />
    <link href="CSS/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        .font {
            margin: 5px 10px;
            font-size: 2.5rem;
        }

        html {
            height: 100%;
        }
        
        .body {
            background-image: url(Images/bg<%=flag %>.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: auto;
        }
    </style>
</head>
<%--必须先引用jQuery后引用webuploader--%>
<script src="JavaScript/JQuery-1.9.1.min.js"></script>
<script type="text/javascript" src="JavaScript/webuploader/webuploader.min.js"></script>

<script type="text/javascript">
    // 文件上传
    jQuery(function () {
        var $ = jQuery,

            $list = $('#fileList'),
            $btn = $('#ctlBtn'),
            state = 'pending',
            uploader;

        var md5 = {};
        var guid = WebUploader.Base.guid();

        var time;

        //有网络时定时刷新
        if (navigator.onLine)
            time = setTimeout(function () { location.href = "http://" + window.location.host; }, 300000); //五分钟刷新

        // 10M一片
        var chunkSize = 10485760;

        // WebUploader提供的钩子（hook），在文件上传前先判断是否已经生成md5
        WebUploader.Uploader.register({
            'before-send-file': 'beforeSendFile',   //整个文件上传前
            "before-send": "beforeSend",            //每个分块上传前
            //"after-send-file": "afterSendFile"      //文件上传完成触发
        }, {
            beforeSendFile: function (file) {
                var that = this;

                var deferred = WebUploader.Deferred();

                //md5[file.id]可将当前md5提交到服务器判断是否已经上传

                // 继续后面行为
                deferred.resolve();

                return deferred.promise();
            },
            beforeSend: function (block) {

                var deferred = WebUploader.Deferred();

                $.ajax({
                    type: "POST",
                    url: "CheckChunk.aspx",
                    data: {
                        md5: md5[block.file.id],
                        //当前分块下标  
                        chunk: block.chunk,
                        //当前分块大小  
                        chunkSize: block.end - block.start
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result) {
                            //分块存在，跳过  
                            deferred.reject();
                        } else {
                            //分块不存在或不完整，重新发送该分块内容  
                            deferred.resolve();
                        }
                    }
                });

                return deferred.promise();
            }
        });

        uploader = WebUploader.create({

            // 选完文件后，是否自动上传
            // 计算出md5后自动上传
            auto: false,

            //指定Drag And Drop拖拽的容器，实现拖拽上传
            dnd: 'body',

            //指定监听paste事件的容器，粘贴添加截屏的图片
            paste: 'body',

            // 不压缩image
            resize: true,

            // 文件接收服务端。
            server: 'UploaderFileByBaidu.ashx',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',

            //是否分片上传
            chunked: true,

            //分片，10M一片
            chunkSize: chunkSize,

            //上传失败重复的次数
            chunkRetry: 5,

            //允许重复上传   为false 相同文件不会再次上传
            duplicate: true,

            //文件上传请求的参数表，每次发送都会发送此对象中的参数
            //自动上传不可用，因为自动上传需要每次生成新的guid，此参数在点击上传时可用
            formData: {
                guid: guid
            },

            //上传的最大线程数
            threads: 5,

            //限制格式
            //accept: {
            //    title: "Files",
            //    extensions: "jpg,txt",
            //    mimeTypes: ".jpg,.txt"
            //}
        });

        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            $list.append('<div class="item" style="background-color: #f5f5f5; color: #000000;" id="' + file.id + '" >' +
                '<h4 class="info">' + file.name + '</h4>' +
                '<p class="state">等待上传...</p>' +
                '</div>');

            //清除定时器
            clearTimeout(time);

            //为了加快上传速度使用文件大小作为值
            md5[file.id] = file.size;

            uploader.upload();

            //获取文件MD5值 
            //md5[file.id] = "";
            //uploader.md5File(file)
            //  // 及时显示进度
            //  .progress(function (percentage) {
            //      $('#' + file.id).find('.state').text('读取文件：' + parseInt(percentage * 100) + "%");
            //  })
            //  // 完成
            //  .then(function (val) {
            //      md5[file.id] = val;
            //      $('#' + file.id).find('.state').text('等待上传...');
            //      //开始上传
            //      uploader.upload();
            //  });
        });

        // 分片上传时 每片上传时附加参数
        uploader.on('uploadBeforeSend', function (object, data, headers) {

            data.md5 = md5[data.id];
            //分块大小
            data.blockSize = object.end - object.start;
            console.log(object);
            //是否合并
            data.isMerge = false;

        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {

            var $li = $('#' + file.id),
                $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                    '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                    '</div>' +
                    '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');
            $percent.css('width', percentage * 100 + '%');

        });

        uploader.on('uploadSuccess', function (file) {

            if (md5[file.id] >= chunkSize) {
                //合并文件
                $.post('UploaderFileByBaidu.ashx', { md5: md5[file.id], name: file.name, isMerge: true }, function (data) {
                    $('#' + file.id).find('p.state').text('已上传，重复上传可续传');
                });
            } else {
                $('#' + file.id).find('p.state').text('已上传');
            }
        });

        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
        });

        var files = 0;
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();

            //上传完成 累加数量
            files++;

            //上传完成的文件数量等于当前所有上传的文件数量
            if (files == uploader.getFiles().length) {

                $.post('UploaderFileByBaidu.ashx', { isComplete: true }, function (data) {

                });

                time = setTimeout(function () { location.reload() }, 300000); //五分钟刷新
            }
        });
        uploader.on('all', function (type) {
            if (type === 'startUpload') {
                state = 'uploading';
            } else if (type === 'stopUpload') {
                state = 'paused';
            } else if (type === 'uploadFinished') {
                state = 'done';
            }
            if (state === 'uploading') {
                $btn.text('暂停上传');
            } else {
                $btn.text('开始上传');
            }

        });

        $btn.on('click', function () {
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });
    });

    function DownFile() {
        var url = "";

        if (getUrlParamByName("type") == null)
            url = "Files.aspx?date=<%=date %>";
        else
            url = "Files.aspx?type=0&date=<%=date %>";

        window.open(url);
        // window.location.href = url;
    }

    function DownRootFile() {
        var url = "";

        if (getUrlParamByName("type") == null)
            url = "Files.aspx";
        else
            url = "Files.aspx?type=0";

        //window.open(url);
        window.location.href = url;
    }

    function getUrlParamByName(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
            return null;
        }
    }
</script>

<body class="<%=display != "none" ? "body" : "" %>">
    <!-- 新标签打开 <form target="_blank">-->
    <form id="aspnetForm" runat="server" enctype="multipart/form-data">
        <div class="container-fluid pc" style="background-color: white; height: 10%; float: left; opacity: 0.7">
            <div class="col-md-10">
                <div class="row font"><a href="#" onclick="DownRootFile()">文件：</a></div>
                <div class="row" style="display: <%=display %>">
                    <div id="uploader" class="wu-example" style="margin-left:1.6rem">
                        <!--用来存放文件信息-->
                        <div id="fileList" class="uploader-list font"></div>
                        <div id="picker" class="btn btn-primary font">选择文件</div>
                    </div>
                </div>
            </div>
            <div class="col-md-10" style="margin-top: 15px; display: <%=display %>">
                <div class="row font" style="display:none">密码：</div>
                <input id="password" runat="server" type="text" class="btn btn-default font" style="width: 15.7rem" />
                <%--单击事件需要放在服务器控件form里面--%>
                <button id="btnZip" runat="server" onserverclick="btnZip_ServerClick" class="btn btn-default font">设置</button>
            </div>
            <div class="col-md-10" style="margin-top: 15px">
                <%--<button id="ctlBtn" class="btn btn-default">开始上传</button></div>--%>
                <button id="btnDown" type="button" class="btn btn-default font" onclick="DownFile()">下载</button>
            </div>
            <div class="col-md-10" style="margin-top: 15px; margin-bottom: 100px; display: <%=display %>">
                <div class="row" style="margin-left: 10px; font-size: large; font-weight: bold">更新说明：</div>
                <div class="row" style="margin: 5px 20px; font-size: medium">2022-03-28</div>
                <div class="row" style="margin: 5px 30px;">增加临时空间，文件上传之后输入框输入11，点击设置将当前上传的文件移入临时空间，用于需要长期保存的文件，需手动删除</div>
                <div class="row" style="margin: 5px 20px; font-size: medium">2022-03-04</div>
                <div class="row" style="margin: 5px 30px;">增加在线文档，未上传文件和输入框无内容时，点击设置跳转到在线文档页面，可将输入的内容保存为文档</div>
                <div class="row" style="margin: 5px 20px; font-size: medium">2022-02-09</div>
                <div class="row" style="margin: 5px 30px;">增加生成ShowDoc注释，上传实体类cs文件，点击设置，生成ShowDoc注释用于自动生成接口文档</div>
                <div class="row" style="margin: 5px 20px; font-size: medium">2022-02-21</div>
                <div class="row" style="margin: 5px 30px;">增加安全限制，没有权限的网络只能下载当前复制的下载链接（在本地文件列表中复制链接），启用临时权限可以取消限制</div>
                <div class="row" style="margin: 5px 20px; font-size: medium">2022-01-21</div>
                <div class="row" style="margin: 5px 30px;">增加拖拽上传功能，可拖拽或通过Ctrl+v上传已复制的文件或截图</div>
                <div class="row" style="margin: 5px 20px; font-size: medium">2021-09-13</div>
                <div class="row" style="margin: 5px 30px;">增加版本管理功能，上传更新版本的zip或apk，然后在输入框输入名称/版本号，如：程序名/1.0.0.1，点击设置</div>
                <div class="row" style="margin: 5px 30px;">待更新的程序通过访问http://当前域名/?key=程序名，获得当前版本号和更新包下载地址</div>
                <div class="row" style="margin: 5px 20px; font-size: medium">2021-05-18</div>
                <div class="row" style="margin: 5px 30px;">增加静态页面浏览功能，上传静态页面的zip，点击设置，跳转到静态页面的链接，可供他人浏览，或在下载列表页面 更多>解压 已上传的zip文件</div>
                <div class="row" style="margin: 5px 20px; font-size: medium">2021-04-10</div>
                <div class="row" style="margin: 5px 30px;">增加翻译接口，调用http://当前域名/Translate.aspx?word=名称，返回翻译结果</div>
                <div class="row" style="margin: 5px 20px; font-size: medium">2021-02-02</div>
                <div class="row" style="margin: 5px 30px;">增加永久空间功能，在下载列表页面 更多>永久空间 将已上传的文件移入永久空间长期保存，可在上传页面点击 文件>永久空间 下载</div>
                <div class="row" style="margin: 5px 20px; font-size: medium">2018-10-01</div>
                <div class="row" style="margin: 5px 30px;">增加加密压缩功能，上传完成后输入密码点击设置，将加密压缩当前上传的文件</div>
                <div class="row" style="margin: 5px 20px; font-size: medium">2016-05-18</div>
                <div class="row" style="margin: 5px 30px;">增加打包压缩功能，上传多个文件完成后点击设置，将打包压缩当前上传的多个文件</div>
            </div>
        </div>
        <div class="container-fluid wince">
        </div>
    </form>
</body>
</html>
<script>

    var os = (function () {
        var UserAgent = navigator.userAgent.toLowerCase();

        return {
            isIpad: /ipad/.test(UserAgent),
            isIphone: /iphone os/.test(UserAgent),
            isAndroid: /android/.test(UserAgent),
            isWindowsCe: /windows ce/.test(UserAgent),
            isWindowsMobile: /windows mobile/.test(UserAgent),
            isWin2K: /windows nt 5.0/.test(UserAgent),
            isXP: /windows nt 5.1/.test(UserAgent),
            isVista: /windows nt 6.0/.test(UserAgent),
            isWin7: /windows nt 6.1/.test(UserAgent),
            isWin8: /windows nt 6.2/.test(UserAgent),
            isWin81: /windows nt 6.3/.test(UserAgent),
            isMac: /mac os/.test(UserAgent)
        };
    }());

    Show();

    //个别WinCE浏览器不能使用JQuery
    function Show() {
        if (os.isWindowsCe || os.isWindowsMobile) {
            $(".pc").hide();
            $(".wince").show();
        } else {
            $(".pc").show();
            $(".wince").hide();
        }
    }

</script>
